<template>
    <el-cascader
        :key="version"
        v-model="selectCategoryId"
        v-loading="loading"
        :show-all-levels="false"
        :clearable="props.clearable !== false"
        :filterable="props.filterable !== false"
        :props="propsData"
        :options="industryData"
        :disabled="isDisabled"
        @change="selectEvent"
    ></el-cascader>
</template>
<script>
import { examBase } from "@/layout/mixin/examBase";
import { get } from "@/api/request";
import { treeList2Tree, treeDataProcess } from "@/utils";
export default {
    mixins: [examBase,],
    props: {
        categoryId: {
            type: Number,
            require: false,
            default: null
        },
        props: {
            type: Object,
            require: false,
            default: () => ({})
        },
        isDisabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            selectCategoryId: null,
            loading: false,
            propsData: {},
            version: 0
        };
    },
    watch: {
        categoryId(categoryId) {
            if (this.selectCategoryId === categoryId) return;
            this.selectCategoryId = categoryId;
            this.loadTreeData();
        },
        industryData(newVal) {
            this.version++; //只要监听到数据源发生变化 ，改变version的值，达到重新渲染的效果
        }
    },
    created() {
        this.selectCategoryId = this.categoryId;
        this.loadTreeData();
        this.propsData = {
            value: "id",
            label: "name",
            emitPath: false,
            checkStrictly: false,
            lazy: true,
            lazyLoad: (node, resolve) => {
                const { level } = node;
                if (node.data && node.data.loaded) {
                    resolve([]);
                    return;
                }
                if (level === 1) {
                    this.loadExamByIndustryId(node.data.id).then(res => {
                        if (res.length === 0) {
                            this.$set(node.data, "disabled", "disabled");
                        }
                        resolve(res);
                    });
                } else if (level === 2) {
                    this.loadCategory(node.data.id).then(res => {
                        if (res.length === 0) {
                            this.$set(node.data, "disabled", "disabled");
                        }
                        resolve(res);
                    });
                } else {
                    resolve([]);
                }
            },
            ...this.props
        };
    },
    methods: {
        loadTreeData() {
            let haveSelect = false;
            if (this.selectCategoryId) {
                for (let node of this.categoryData) {
                    treeDataProcess(node, (child, _) => {
                        if (haveSelect) {
                            return;
                        }
                        haveSelect = child.id === this.selectCategoryId;
                    });
                    if (haveSelect) {
                        break;
                    }
                }
            }
            if (!haveSelect) {
                let task;
                let categoryDetail;
                this.loading = true;
                if (this.selectCategoryId) {
                    task = Promise.all([
                        this.loadIndustry().then(() => {
                        }),
                        get(
                            `/exam/category/detail/${this.selectCategoryId}`
                        ).then(data => {
                            categoryDetail = data;
                            return Promise.all([
                                this.loadExam(data.industryId),
                                this.loadCategory(data.examId)
                            ]);
                        })
                    ]).then(_ => {
                        for (let exam of this.examData) {
                            if (categoryDetail.examId === exam.id) {
                                exam.loaded = true;
                                this.$set(exam, "children", this.categoryData);
                                break;
                            }
                        }
                        for (let ind of this.industryData) {
                            if (categoryDetail.industryId === ind.id) {
                                ind.loaded = true;
                                this.$set(ind, "children", this.examData);
                                break;
                            }
                        }
                    });
                } else {
                    task = this.loadIndustry().then(() => {
                    });
                }
                task.finally(() => {
                    this.version++;
                    this.loading = false;
                });
            }
        },
        selectEvent(vl) {
            this.$emit("update:categoryId", vl);
        }
    }
};
</script>
